<template>
    <div class="app-container">
        <div class="search-container">
            <el-form v-show="showSearch" ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
                <el-form-item label="主键" prop="outpFeesPaymentsId">
                    <el-input v-model="queryParams.outpFeesPaymentsId" clearable placeholder="请输入主键"
                              @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item label="门诊收费主记录id" prop="outpFeesMasterId">
                    <el-input v-model="queryParams.outpFeesMasterId" clearable placeholder="请输入门诊收费主记录id"
                              @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item label="收费号" prop="feesNo">
                    <el-input v-model="queryParams.feesNo" clearable placeholder="请输入收费号"
                              @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item label="金额类型" prop="moneyType">
                    <el-select v-model="queryParams.moneyType" clearable placeholder="请选择金额类型">
                        <el-option v-for="dict in dictDataMap['pay_way_dict']" :key="dict.dictValue"
                                   :label="dict.dictLabel"
                                   :value="dict.dictValue"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="实收金额" prop="charges">
                    <el-input v-model="queryParams.charges" clearable placeholder="请输入实收金额"
                              @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item label="机构ID" prop="orgId">
                    <el-input v-model="queryParams.orgId" clearable placeholder="请输入机构ID"
                              @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item label="备注信息" prop="remarks">
                    <el-input v-model="queryParams.remarks" clearable placeholder="请输入备注信息"
                              @keyup.enter="handleQuery"/>
                </el-form-item>
                <el-form-item>
                    <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
                </el-form-item>
            </el-form>
        </div>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button v-hasPerm="['finance:outpFeesPaymentsMoney:add']" plain type="primary" @click="handleAdd">
                    <template
                        #icon>
                        <i-ep-plus/>
                    </template>
                    新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPerm="['finance:outpFeesPaymentsMoney:edit']" :disabled="single" plain type="success"
                           @click="handleUpdate">
                    <template #icon>
                        <i-ep-edit/>
                    </template>
                    修改
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPerm="['finance:outpFeesPaymentsMoney:remove']" :disabled="multiple" plain type="danger"
                           @click="handleDelete">
                    <template #icon>
                        <i-ep-delete/>
                    </template>
                    删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPerm="['finance:outpFeesPaymentsMoney:export']" plain type="warning"
                           @click="handleExport">
                    <template #icon>
                        <i-ep-download/>
                    </template>
                    导出
                </el-button>
            </el-col>
        </el-row>

        <el-table v-adaptive :border="true" :data="outpFeesPaymentsMoneyList" :header-cell-style="$headerCellStyle" :stripe="true"
                  highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column :align="'center'" type="selection" width="55"/>
            <el-table-column :align="'center'" label="主键" prop="outpFeesPaymentsId"/>
            <el-table-column :align="'center'" label="门诊收费主记录id" prop="outpFeesMasterId"/>
            <el-table-column :align="'center'" label="收费号" prop="feesNo"/>
            <el-table-column :align="'center'" label="金额类型" prop="moneyType">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['pay_way_dict']" :value="scope.row.moneyType"/>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="实收金额" prop="charges"/>
            <el-table-column :align="'center'" label="机构ID" prop="orgId"/>
            <el-table-column :align="'center'" label="备注信息" prop="remarks"/>
            <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作" width="220">
                <template #default="scope">
                    <el-button v-hasPerm="['finance:outpFeesPaymentsMoney:edit']" type="success"
                               @click="handleUpdate(scope.row)">
                        <template #icon>
                            <i-ep-edit/>
                        </template>
                        修改
                    </el-button>
                    <el-button v-hasPerm="['finance:outpFeesPaymentsMoney:remove']" type="danger"
                               @click="handleDelete(scope.row)">
                        <template #icon>
                            <i-ep-delete/>
                        </template>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
                    :total="total" @pagination="getList"/>
    </div>
</template>
<script lang="ts">
export default {
    name: "OutpFeesPaymentsMoney"
}
</script>

<script setup lang="ts">
import {
    addOutpFeesPaymentsMoney,
    delOutpFeesPaymentsMoney,
    getOutpFeesPaymentsMoney,
    listOutpFeesPaymentsMoney,
    updateOutpFeesPaymentsMoney
} from "@/api/finance/outpFeesPaymentsMoney";

import {useDictStoreHook} from "@/store/modules/dict";

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('pay_way_dict'))

export interface OutpFeesPaymentsMoney extends PageQuery {
    outpFeesPaymentsId: string,
    outpFeesMasterId: string,
    feesNo: string,
    moneyType: string,
    charges: number,
    orgId: string,
    remarks: string
}

const {proxy} = getCurrentInstance() as any;

const queryParamsRef = ref()
const outpFeesPaymentsMoneyList = ref([]);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    outpFeesPaymentsId: "",
    outpFeesMasterId: "",
    feesNo: "",
    moneyType: "",
    charges: 0,
    orgId: "",
    remarks: ""
})


/** 查询门诊收费支付类型方式列表 */
function getList() {
    listOutpFeesPaymentsMoney(queryParams.value).then((response: any) => {
        outpFeesPaymentsMoneyList.value = response.rows;
        total.value = response.total;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    queryParamsRef.value.resetFields()
    // proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.outpFeesPaymentsId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download('finance/outpFeesPaymentsMoney/export', {
        ...queryParams.value
    }, `outpFeesPaymentsMoney_${new Date().getTime()}.xlsx`)
}

getList();
</script>
